.residents-room[hidden] { display: none !important; }
body.residents-room-open { overflow: hidden !important; }
.residents-room {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: #201910 url("../images/locations/shelter-residents-room.png") left center / cover no-repeat;
  isolation: isolate; color: #eee4cd;
  animation: residents-room-enter .25s ease-out both;
}
.residents-room::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at center, transparent 40%, #09070470);
}
.residents-room button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.residents-room__previous, .residents-room__next {
  position: absolute; z-index: 4; min-width: 44px; min-height: 44px; padding: 10px 16px;
  background: #15110cd9; border: 1px solid #b69d6b66; border-radius: 3px;
  box-shadow: 0 3px 12px #0006; text-shadow: 0 1px 3px #000;
}
.residents-room__previous { bottom: max(14px, env(safe-area-inset-bottom)); left: 16px; }
.residents-room__next { bottom: max(14px, env(safe-area-inset-bottom)); right: 16px; }
.residents-room button[hidden] { display: none !important; }
.residents-room button:disabled { opacity: .35; cursor: default; }
.residents-room button:focus-visible { outline: 2px solid #e4c287; outline-offset: 4px; }
.residents-room__door, .residents-room__door:hover, .residents-room__door:focus-visible {
  position: absolute; z-index: 2; padding: 0; background: transparent; border: 0;
  border-radius: 0; box-shadow: none; outline: none;
}
.residents-room__door-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.residents-room__door-map .scene-object-shape { pointer-events: none; }
.residents-room__actors { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.residents-room__person {
  position: absolute; bottom: max(42px, 5.5%); width: var(--room-avatar-width); height: var(--room-avatar-height);
  transform: translateX(-50%); background: none !important; border: 0; padding: 0; margin: 0;
  border-radius: 0; box-shadow: none; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.residents-room__person::before {
  content: ""; position: absolute; bottom: -3px; left: 18%; width: 64%; height: 20px;
  border-radius: 50%; background: #09060499; filter: blur(7px); pointer-events: none;
}
.residents-room__avatar.survivor-avatar {
  position: absolute; left: 50%; bottom: 0; width: 190px; height: 360px; min-width: 0; min-height: 0;
  transform: translateX(-50%) scale(var(--room-avatar-scale)); transform-origin: bottom center;
  overflow: visible; background: transparent !important; border: 0; border-radius: 0; box-shadow: none;
  filter: brightness(.88) sepia(.09) drop-shadow(3px 5px 4px #0005); pointer-events: none;
  transition: filter .18s ease;
}
.residents-room__avatar .player-avatar__stage {
  position: absolute !important; left: 50% !important; bottom: 0 !important; top: auto !important;
  width: 190px !important; height: 360px !important; transform: translateX(-50%) !important;
  margin: 0 !important; background: transparent !important; pointer-events: none;
}
.residents-room__avatar::before, .residents-room__avatar::after { display: none !important; }
.residents-room__avatar .survivor-avatar__fallback { width: 190px; height: 360px; object-fit: contain; }
.residents-room__person:hover .residents-room__avatar,
.residents-room__person:focus-visible .residents-room__avatar { filter: brightness(.98) drop-shadow(0 0 3px #e4c287aa); }
.residents-room__name {
  position: absolute; left: 50%; bottom: -27px; transform: translateX(-50%); max-width: min(200px, 36vw);
  padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; font-weight: 600; text-shadow: 0 2px 3px #000, 0 0 8px #000;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.residents-room__person:hover .residents-room__name, .residents-room__person:focus-visible .residents-room__name { opacity: 1; }
.residents-room__empty { position: absolute; bottom: 12%; left: 25%; right: 10%; text-align: center; text-shadow: 0 2px 5px #000; background: #15110c80; padding: 12px; border-radius: 3px; }
@media (hover: none) { .residents-room__name { opacity: 1; } }
@media (max-width: 650px) {
  .residents-room__person { bottom: 12%; }
  .residents-room__empty { left: 16px; right: 16px; }
}
@keyframes residents-room-enter { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .residents-room, .residents-room * { animation: none !important; transition: none !important; } }